[bubble] 要素のConditional(条件定義)で動作や表示を制御してみる

Webアプリではカーソルがボタンに乗ったときに色を変えたり、ユーザーがログインしているときはログアウトボタンに変更したりすることは多いと思います。 bubbleでも特定の状況下で要素の動作や表示を変更できるようになっています。

やってみよ

ログイン時にはログアウトボタンを表示、ログアウト時にはログインボタンを表示　というケースでやっていきましょう。

条件の定義

表示の場合

指定の要素をダブルクリックしてプロパティエディタを開きます。Conditionalタブをクリックします。

この画面で要素に適用される条件を定義していきます。

When の箇所には定義されたプロパティが適用されるのはいつなのか？という条件を設定します。

ログアウト時にはログインボタンを表示 であれば Current user isn't logged in となります。

候補が表示されるので、自身で選択して決定していきます。

Select a property to change when true では、指定した条件を満たしていたときに要素のプロパティをどう変更するのかを決定します。

要素に応じて設定できるプロパティが表示されます。

ログアウト時にはログインボタンを表示 させたいので This element is visible を選択します。

This element is visible　を選択したら、横にあるチェックボックスをオンにします。

ログアウトボタンの表示条件を定義するのであれば、

When は Current user is logged in で、　Select a property to change when true　は　This element is visible　となります。

非表示の場合

ログイン時にはログアウトボタンを表示　の時は、ログインボタンを非表示にします。 ログアウト時にはログインボタンを表示　の時は、ログアウトボタンを非表示にします。

表示の場合と同じようにWhenとSelect a property to change when true　を設定することでこのような制御が可能になります。

表示の時に設定した条件とプロパティの逆のことを設定します。

おまけ) カーソルが乗ったときに色を変える

When に <<要素>> is hovered　を設定し、プロパティをFont colorに設定します。

あとはお好きな色を指定しましょう。

これでカーソルが乗った時に色を変えることができます。

表示の確認

Previewを表示して表示の確認をしてみましょう。

Previewボタンを押すか、アプリのURLに?debug_mode=true　をつけてアクセスするとデバッグモードでアクセスできます。

デバッグモードだとページ下部に要素の状態が確認できるデバッガーが表示されます。

ログアウト時

ログアウト時にはログインボタンを表示　の時の表示と状態です。 意図通りとなっていました。

ログアウトボタンの状態も正しい挙動となっていました。

ログイン時

ログイン時にはログアウトボタンを表示　の時の表示と状態です。 こちらも意図通りとなっていました。

ログインボタンの状態も正しい挙動となっていました。

最後に

要素のConditionalを設定して表示や動作を変更してみました。

こういったことはWebアプリでよく使うと思います。 プログラミングやスタイルシートに詳しくなくてもGUI上の設定で素早く実装できるので是非覚えておきたいですね。

デバッグモードでの要素の確認も便利なので、どの条件がtrueでどのように表示されているのかを知ることができるので非常に便利です。 開発中はかなりお世話になると思います。